<template>
	<view class="citywarp">
		
		<view class="city">
			<view v-for="(item,index) in city" :key="index" @tap="click(item)" :class="[citytxt==item?'hover':'']">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			citytxt: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				city: ['京', '津', '沪', '渝', '蒙', '新', '藏', '宁', '桂', '港', '澳', '黑', '吉', '辽', '晋', '冀', '青', '鲁', '豫', '苏', '皖', '浙',
					'闽', '赣', '湘', '鄂', '粤', '琼', '甘', '陕', '贵', '云', '川'
				],
				ind: 0
			};
		},


		methods: {
			click(item) {
				console.log(item)
				this.$emit('changecity', item);
			},
		}


	}
</script>

<style lang="scss" scoped>
	.citywarp {
		background-color: #fff;

		.sure {
			display: flex;
			justify-content: flex-end;

			view {
				color: green;
				font-size: 26rpx;
				padding: 20rpx 30rpx;
			}
		}

		.city {
			display: flex;
			flex-wrap: wrap;

			view {
				width: 20%;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 1px solid #DEDEDE;
				border-bottom: 1px solid #DEDEDE;
				box-sizing: border-box;
				font-size: 30rpx;
			}

			.hover {
				background-color: #007AFF;
				color: #fff;
				border-right: 1px solid #007AFF;
				border-bottom: 1px solid #007AFF;
			}
		}

	}
</style>
